<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>新增权限</title>
    <link rel="stylesheet" th:href="@{/webjars/ztree/3.5.0/css/zTreeStyle/zTreeStyle.css}" type="text/css" />

</head>
<body style="min-width: 500px;">
<div th:replace="/layout/css :: #css"></div>

<div class="container-fluid">
    <form id="createForm" method="post" class="form-horizontal modal-form">
        <input id="id" name="id" th:type="hidden" th:value="${permission.id}" />
        <input id="menuId" name="menuId" th:type="hidden" th:value="${permission.menuId}" />
        <div class="form-group">
            <label for="systemId" class="control-label">系统</label>
            <select id="systemId" name="systemId" class="form-control" onchange="loadMenu();">
                <option value="0">请选择系统</option>
                <option th:each="system,systemStat : ${systemList}" th:value="${system.id}" th:text="${system.title}"></option>
            </select>
        </div>
        <div class="form-group">
            <label for="menu" class="control-label">菜单</label>
            <div class="input-group">
                <input id="menu" name="menu" type="text" class="form-control" readonly="readonly" />
                <a id="menuBtn" href="#" class="input-group-addon" onclick="showMenu(); return false;">选择</a>
                <a  href="#" class="input-group-addon" onclick="clearMenu(); return false;">清空</a>
                <div id="menuContent" class="menuContent">
                    <ul id="treeMenu" class="ztree" style="margin-top:0; width:250px;"></ul>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="type" class="control-label">权限类型</label>
            <select id="type" name="type" class="form-control">
                <option value="1" selected="selected">功能</option>
                <option value="2">菜单</option>
                <option value="3">按钮</option>
            </select>
        </div>
        <div class="form-group">
            <label for="name" class="control-label">权限名</label>
            <input id="name" name="name" class="form-control" />
        </div>
        <div class="form-group">
            <label for="permissionValue" class="control-label">权限码</label>
            <input id="permissionValue" name="permissionValue" class="form-control" />
        </div>

        <br />
        <button type="button" class="btn btn-primary btn-block" onclick="doCreate()">保 存</button>

    </form>


</div>

<script type="text/javascript" th:src="@{/js/modalPage.js}"></script>
<script type="text/javascript" th:src="@{/webjars/ztree/3.5.0/js/jquery.ztree.core-3.5.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/ztree/3.5.0/js/jquery.ztree.excheck-3.5.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/ztree/3.5.0/js/jquery.ztree.exedit-3.5.min.js}"></script>

<script th:inline="javascript">
    /*<![CDATA[*/
    var treeSetting = {
        view: {
            dblClickExpand: false
        },
        callback: {
            onClick: onClick
        },
        data: {
            key: {
                url: "xUrl"
            }
        }
    };


    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeMenu");
        var nodes = zTree.getSelectedNodes();
        var node = nodes[0];

        $("#menu").val(node.name);
        $("#menuId").val(node.id);
    }

    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }

    function showMenu(){
        var systemId = $("#systemId").val();
        if(systemId == 0){
            chooseConfirm("请选择系统");
            return;
        }
        var menuObj = $("#menu");
        $("#menuContent").css({'left' : "0px", 'top': menuObj.outerHeight() + "px"}).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);

    }
    function loadMenu(){

        var systemId = $("#systemId").val();
        $("#treeMenu").html("");
        $("#menuId").val("0");

        if(systemId == 0){
            chooseConfirm("请选择系统");
            return;
        }

        $.ajax({
            type: 'post',
            url: '/menu/getTreeMenu/' + systemId,
            success: function(result) {
                if (result.status != 0) {
                    failHandler(result);
                } else {
                    debugger;
                    var zNodes = result.data;
                    $.fn.zTree.init($("#treeMenu"), treeSetting, zNodes);


                }
            },
            error: errorHandler
        });
    }

    function doCreate(){
        $.ajax({
            type: 'post',
            url: '/permission/update',
            data: $('#createForm').serialize(),
            success: function(result) {
                if (result.status != 0) {
                    failHandler(result);
                } else {
                    successConfirm();
                    closeModal();
                }
            },
            error: errorHandler
        });
    }

    $(function () {
        var permission = [[${permission}]];
        loadData(permission);

        var menu = [[${menuModel}]];
        if(menu){
            $("#menu").val(menu.name);
        }

        loadMenu();

    });

    /**
     * 清空菜单，重新加载权限
     * */
    function clearMenu(){
        if($("#menuId").val() == 0){
            return;
        }
        $("#menu").val("");
        $("#menuId").val(0);
        loadPermmissions();
    }

    /*]]>*/
</script>
</body>
</html>